<template>
  <div class="nihao">
    <!-- 我的 -->
    <div class="myclick">
      <div class="iconfont icon-icon-test6 zj" @click="goFn"></div>
      <div class="jiji">我的</div>
    </div>
    <!-- 登录注册 -->
    <div class="login" v-show="isshow">
      <div class="l1">
        <img v-lazy="scrin" >
      </div>
      <div class="l2">
        <div @click="gopath()">登录/</div>
        <div @click="gopath2()" class="p1">注册</div>
      </div>
      <div class="l3 iconfont icon-icon-test8"></div>
      <div class="kp">
        <span class="iconfont icon-phone yp"></span><span>暂无绑定手机号</span>
      </div>
    </div>
    <!-- 登录后 -->
    <div class="login2" v-show="isshow2">
      <div class="l1">
        <img v-lazy="scrgo">
      </div>
      <div class="l22">
        <router-link tag="div" to="/center/userinfo" active-class="active">
          <span>{{ username }}</span>
        </router-link>
      </div>
      <div class="l3 iconfont icon-icon-test8" @click="goUser"></div>
      <div class="kp">
        <span class="iconfont icon-phone yp"></span><span>暂无绑定手机号</span>
      </div>
    </div>
    <!-- 登录后 -->
    <div class="use1" v-show="true">
      <van-col class="jz1">
        <van-row class="jz2"><b class="zz1">0.00</b>元</van-row>
        <van-row class="jz" span="8">我的余额</van-row>
      </van-col>
      <van-col class="jz1">
        <van-row
          class="jz2"
          :coupons="coupons"
          :chosen-coupon="chosenCoupon"
          @click="showList = true"
          ><b class="zz2">{{ count }}</b
          >个</van-row
        >
        <!-- 优惠券列表 -->
        <van-popup
          v-model="showList"
          round
          position="bottom"
          style="height: 90%; padding-top: 4px"
        >
          <van-coupon-list
            :coupons="coupons"
            :chosen-coupon="chosenCoupon"
            :disabled-coupons="disabledCoupons"
            @change="onChange"
            @exchange="onExchange"
          />
        </van-popup>
        <van-row class="jz">我的优惠</van-row>
      </van-col>
      <van-col class="jz1">
        <van-row class="jz2"><b class="zz3">0</b>分</van-row>
        <van-row class="jz">我的积分</van-row>
      </van-col>
    </div>
    <!-- 订单 -->
    <div class="ding">
      <van-cell title="我的订单" icon="orders-o" class="hp">
        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
        <template #right-icon>
          <van-icon name="arrow" class="search-icon" />
        </template>
      </van-cell>
      <van-cell title="积分商城" icon="bag" class="hp">
        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
        <template #right-icon>
          <van-icon name="arrow" class="search-icon" />
        </template>
      </van-cell>
      <van-cell title="饿了么会员卡" icon="gem" class="hp">
        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
        <template #right-icon>
          <van-icon name="arrow" class="search-icon" />
        </template>
      </van-cell>
    </div>
    <!-- 服务中心 -->
    <div class="fuwu">
      <van-cell title="服务中心" icon="manager-o" class="hp">
        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
        <template #right-icon>
          <van-icon name="arrow" class="search-icon" />
        </template>
      </van-cell>
      <van-cell title="下载饿了么App" icon="down" class="hp po">
        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
        <template #right-icon>
          <van-icon name="arrow" class="search-icon" />
        </template>
      </van-cell>
    </div>

    <transition
      mode="out-in"
      enter-active-class="animate__animated animate__fadeInLeft"
      leave-active-class="animate__animated animate__fadeOutRight"
    >
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
import 'animate.css'
import Vue from "vue"
import { Col, Row, CouponCell, CouponList, popup, Icon, Cell } from 'vant';
import { mapGetters } from 'vuex'
import "@/assets/iconfont/iconfont.css"


Vue.use(Col);
Vue.use(Row);
Vue.use(CouponCell);
Vue.use(CouponList);
Vue.use(popup);
Vue.use(Icon);
Vue.use(Cell)


const coupon = {
  available: 1,
  condition: '无使用门槛\n最多优惠12元',
  reason: '',
  value: 150,
  name: '无门槛补贴',
  startAt: 1607323798,
  endAt: 1609340400,
  valueDesc: '1.5',
  unitDesc: '元',
};
const coupon1 = {
  available: 1,
  condition: '无使用门槛\n最多优惠12元',
  reason: '',
  value: 150,
  name: '吃点么小红包子',
  startAt: 1605020400,
  endAt: 1607323798,
  valueDesc: '1.5',
  unitDesc: '元',
}
export default {
  data() {
    return {
      scrin:require("../../assets/images/ti.gif"),
      scrgo:require("../../assets/images/8.jpg"),
       src:
        "https://pic.maizuo.com/usr/movie/070da81f4a5e8d603da1cd537376dcfd.jpg?x-oss-process=image/quality,Q_70",
      count: '2',
      username: '',
      isshow: true,
      isshow2: false,

      // youhuijuan
      showList: false,
      chosenCoupon: -1,
      // coupons: [coupon],
      disabledCoupons: [coupon1],
      coupons: [
        coupon,
        {
          available: 1,
          condition: '无使用门槛\n最多优惠12元',
          reason: '',
          value: 150,
          name: '无门槛补贴',
          startAt: 1607323798,
          endAt: 1609340400,
          valueDesc: '3',
          unitDesc: '元',
        },
        {
          available: 1,
          condition: '无使用门槛\n最多优惠1000元',
          reason: '',
          value: 800,
          name: 'vip中p通用大红包子',
          startAt: 1607323798,
          endAt: 1609340400,
          valueDesc: '800',
          unitDesc: '元',
        },
      ],

    }
  },

  methods: {
    goFn() {
      this.$router.go(-1)
    },
    gopath() {
      this.$router.push({ name: 'login' })
    },
    gopath2() {
      this.$router.push({ name: 'signin' })
    },
    goUser() {
      this.$router.push({ name: 'userinfo' })
    },
    //youhuijuan
    onChange(index) {
      // this.showList = false;
      this.chosenCoupon = index;
    },
    onExchange(code) {
      this.coupons.push(coupon);
    },


  },
  created() {
    // console.log('进入我的');
    this.$bus.$emit('hideMenu', true)
    this.isshow = true
    this.isshow2 = false


  },
  mounted() {
    const tokenStr = sessionStorage.getItem('token')
    if (tokenStr) {
      const name = sessionStorage.getItem("username")
      this.count = this.coupons.length
      this.disabledCoupons
      this.coupons
      this.username = name
      this.isshow = false
      this.isshow2 = true
    
    }
    else {
      this.count = "0"
      this.disabledCoupons =[]
      this.coupons = []
      this.isshow = true
      this.isshow2 = false
    }

  },
  beforeDestroy() {
    // console.log('离开我的');
    this.username = ""
  },


}
</script>

<style lang="scss" scoped>
.nihao {
  width: 100%;
  height: 100%;
  background: linear-gradient(to right,#d3959b,#bfe6ba);
}
.fuwu {
  margin-top: 10px;
}
.hp {
  height: 48px;
  border-bottom: 1px solid #ddd;
  background: linear-gradient(to top right,#d3959b,#bfe6ba);
}
.hp:nth-of-type(3) {
  border: 0;
}
.po {
  border: 0;
}
.ding {
  color: #bfe6ba;
}
.search-icon {
  font-size: 16px;
  line-height: inherit;
  color: #666;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.myclick {
  width: 100%;
  height: 51px;
  background: linear-gradient(to left,#d3959b,#bfe6ba);
  border-bottom: 1px solid #fff;
}
.zj {
  position: absolute;
  width: 30px;
  height: 30px;
  font-size: 30px !important;
  color: #fff;
  text-align: center;
  line-height: 30px;
  top: 10px;
  left: 10px;
}
.jiji {
  width: 100%;
  height: 50px;
  font-size: 20px;
  color: #fff;
  text-align: center;
  line-height: 51px;
  font-weight: bold;
}
.login {
  width: 100%;
  height: 100px;
  background: linear-gradient(to left,#d3959b,#bfe6ba);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
}
.login2 {
  width: 100%;
  height: 100px;
  background: linear-gradient(to left,#d3959b,#bfe6ba);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
}
.l1 {
  width: 65px;
  height: 65px;
  background-color: #fff;
  border-radius: 50%;
  margin-right: 10px;
  margin-left: 10px;
  position: relative;
}
.l1 img {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  z-index: 2;
  width: 65px;
  height: 65px;
  border-radius: 50%;
}
.l2 {
  height: 53px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  color: #fff;
  font-size: 20px;
}
.l3 {
  font-size: 25px;
  margin-left: 200px;
  color: #fff;
}
.kp {
  position: absolute;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 16px;
  color: #fff;
  top: 55px;
  left: 82px;
}
.yp {
  font-size: 20px;
}
.l22 {
  height: 53px;
  margin-left: 2px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
}
.jz {
  text-align: center;
  margin-top: 10px;
  color: #666;
  font-size: 14px;
}
.use1 {
  width: 100%;
  height: 94px;
  display: flex;
  justify-content: flex-start;
  text-align: center;
  margin-bottom: 10px;
  background: linear-gradient(45deg,#d3959b,#bfe6ba);
}
.jz1 {
  flex: 1;
  border-right: 1px solid #ddd;
}
.jz1:last-child {
  border: 0;
}
.jz2 {
  margin-top: 24px;
}
.zz1 {
  font-size: 28px;
  color: #ff9900;
}
.zz2 {
  font-size: 28px;
  color: #ff5f3e;
}
.zz3 {
  font-size: 28px;
  color: #6ac20b;
}
</style>
